{% extends "云商/template.html" %}
{% block title %}商品详情{% endblock %}
{% block css %}

<style>
    .ShopLine span:hover {
        color: #01aaed;
    }

    .preview-wrap {
        width: 350px;
    }

    .main-img {
        height: 352px;
    }

    .itemInfo-wrap {
        width: 590px;
    }



    #ID-carousel-demo-1 .Yy-this {
        border: 1px solid #01aaed;
    }

    #ID-carousel-demo-1 img {
        border: 1px solid transparent;
    }

    .summary {
        background-color: #f3f3f3;
    }

    .summary-info {
        width: 80%;
    }

    .summary-commit {
        width: 20%;
    }

    .quan-item {
        position: relative;
        float: left;
        height: 16px;
        padding-left: 2px;
        line-height: 15px;
        text-align: center;
        border-top: 1px solid #df3033;
        border-bottom: 1px solid #df3033;
        background: #ffdedf;
        font-size: 14px;
        white-space: nowrap;
        margin-right: 13px;
        cursor: pointer;

    }

    .quan-item-text {

        padding: 0 10px;
        color: #df3033;
        font-size: 12px;
    }

    .quan-item s {
        left: 0;
        background-position: -2px 0;
    }

    .quan-item b {
        right: -2px;
    }

    .quan-item s,
    .quan-item b {
        position: absolute;
        top: -1px;
        display: block;
        height: 16px;
        width: 2px;
        overflow: hidden;
        background: url(/static/CloudImages/云商/临时图片/quan-arr.gif) no-repeat;
    }

    .summary-info-in {
        width: 15%;
    }

    .yhq {
        height: 15px;
        line-height: 15px;
    }

    .summary-info-c {
        width: 85%;
    }
</style>
<link rel="stylesheet" href="/static/CloudCss/loading/Cloud-loading1.css">
{% endblock %}
{% block body %}


<div class="layui-card Yy-pd-lr-5B">
    <div class="layui-card-header">
        <!-- <div class="Yy-text-r ShopLine">
            <span class="Yy-mr-10 Yy-cursor-pointer ShopName"></span>
            <span class="Yy-cursor-pointer Yy-mr-10">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-kefu"></use>
                </svg>
                联系客服
            </span>
            <span class="Yy-cursor-pointer">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang"></use>
                </svg>
                关注店铺
            </span>
        </div> -->
    </div>
    <div class="layui-card-body">
        <div class="product-intro Yy-d-flex">
            <div class="preview-wrap Yy-mr-30">
                <div class="main-img Yy-pos-r">

                    <div class="cssload-wrap">
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                        <div class="cssload-circle"></div>
                    </div>

                </div>

                <!-- 切换图片 -->
                <div class="layui-carousel Yy-mt-12px" id="ID-carousel-demo-1">
                    <div carousel-item>
                        <div class="Yy-ptb-5px  max_img_len">
                            <!-- 最多7个 -->
                            <!-- <img class="Yy-cursor-pointer Yy-img-hover1 Yy-this"
                                src="https://img10.360buyimg.com/n5/jfs/t1/184194/28/39715/81731/6528e2a9F39666bb1/a24c6a9ccf375629.jpg"
                                alt=""
                                style="width: 50px;height:50px;"
                                > -->

                        </div>
                    </div>
                </div>

                <!-- 关注、举报 -->
                <!-- <div class="layui-panel Yy-d-flex Yy-ju-sb Yy-mt-12px layui-padding-2">
                    <div class="Yy-cursor-pointer Yy-hover-color-1">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-guanzhu1xuanzhong"></use>
                        </svg>
                        关注
                    </div>
                    <div class="Yy-cursor-pointer Yy-hover-color-1">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jubao"></use>
                        </svg>
                        举报
                    </div>
                </div> -->
            </div>
            <div class="itemInfo-wrap Yy-">
                <div class="sku-name Yy-mb-5px layui-font-20 " style="line-height: 34px;">
                    <!-- Rovinj大姨妈神器暖手宝充电生日礼物女520情人节礼物送女朋友老婆闺蜜 【黄色】10000mA容量丨五档数显 -->
                </div>

                <div class="summary Yy-d-flex Yy-mb-5px Yy-plr-15px">
                    <div class="summary-info Yy-o-h">
                        <ul class="Yy-w-100">
                            <li class="Yy-d-flex Yy-ai-cen Yy-mt-12px">
                                <span class="layui-font-14 summary-info-in layui-elip">云商价</span>
                                <div class="summary-info-c">
                                    <span class="layui-font-red">
                                        <svg class="icon layui-font-32" aria-hidden="true">
                                            <use xlink:href="#icon-weibiaoti1"></use>
                                        </svg>
                                        <span class="layui-font-32 layui-font-red Price"> </span>
                                        元
                                    </span>
                                </div>
                            </li>
                            <!-- 
                            <li class="Yy-d-flex Yy-ai-cen Yy-mt-12px Yy-flex-wrap">
                                <span class="layui-font-18 Yy-mr-10 summary-info-in">优惠券</span>
                                <a href="#" class="quan-item">
                                    <s></s>
                                    <b></b>
                                    <span class="quan-item-text">满5减5</span>
                                </a>
                                <a href="#" class="quan-item">
                                    <s></s>
                                    <b></b>
                                    <span class="quan-item-text">满5减5</span>
                                </a>
                                <a href="#" class="quan-item">
                                    <s></s>
                                    <b></b>
                                    <span class="quan-item-text">满5减5</span>
                                </a>
                                <a href="#" class="quan-item">
                                    <s></s>
                                    <b></b>
                                    <span class="quan-item-text">满5减5</span>
                                </a>
                                <a href="#" class="quan-item">
                                    <s></s>
                                    <b></b>
                                    <span class="quan-item-text">满5减5</span>
                                </a>
                                <a href="#" class="quan-item">
                                    <s></s>
                                    <b></b>
                                    <span class="quan-item-text">满5减5</span>
                                </a>
                                <a href="#" class="quan-item">
                                    <s></s>
                                    <b></b>
                                    <span class="quan-item-text">满5减5</span>
                                </a>
                            </li> -->

                        </ul>
                    </div>
                    <div class="summary-commit Yy-o-h"></div>
                </div>

                <!-- 支付方式 -->
                <div class="layui-panel Yy-mt-10px Yy-mb-5px Yy-plr-15px">
                    <div>请选择您的支付方式: </div>
                    <div class="layui-form">
                        <input type="radio" name="AAA" lay-filter="PayRadio" value="alipay" title="支付宝" checked>
                        <input type="radio" name="AAA" lay-filter="PayRadio" value="YyCloud" title="余额支付">
                    </div>
                </div>

                <!-- 支付 -->
                <div class="Yy-mt-10px ">
                    <div>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius"
                            lay-on="GoPay">去付款</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
{% include "云商/include/footer.html" %}

{% endblock %}
{% block js %}
{% include "云商/include/AjAx之Loading.html" %}
<script>

    const user_info = YyGetLocatStorge();
    if (user_info == null) {
        layer.alert(
            "请先登录后再来查看噢！",
            { icon: 0, closeBtn: 0, title: 'Yy云Msg' },
            function (index) {
                YyGo('/web/CloudShop/index/')
                layer.close(index);
            }

        );
    }
</script>
<script>

    const goods_id = YygetQueryParam("goods_id");

    if (goods_id == null) {
        layer.alert(
            "非法访问",
            { icon: 2, closeBtn: 0, title: 'Yy云Msg' },
            function (index) {
                YyGo('/web/CloudShop/index/')
                layer.close(index);
            }

        );
    } else {

        layui.use(function () {
            var carousel = layui.carousel;
            var util = layui.util;
            var layer = layui.layer;
            var form = layui.form;
            var pay_method = $('input[name="AAA"]')[0].value
            form.on('radio(PayRadio)', function (data) {
                var elem = data.elem; // 获得 radio 原始 DOM 对象
                var checked = elem.checked; // 获得 radio 选中状态
                var value = elem.value; // 获得 radio 值
                pay_method = value
            });


            util.on('lay-on', {
                GoPay: () => {
                    // 去付款
                    if (user_info == null) {
                        layer.msg("请先登录后在试试吧~", { icon: 0 });
                    } else {
                        if (pay_method == 'YyCloud') {
                            axios({
                                url: '/api/CloudShop/buy_goods/',
                                method: 'POST',
                                data: {
                                    "user_id": user_info.id,
                                    "goods_id": goods_id,
                                }
                            }).then(res => {
                               setTimeout(() => {
                                // 
                                window.location.href = '/web/CloudShop/index/';
                               }, 1500);
                            }).catch(err => {
                                console.log(err);
                            })
                        } else {
                            layer.msg("该支付方式正在维修中, 马上就好~", { icon: 2 })
                        }
                    }


                },

                ShowMinImg: (e) => {
                    layer.photos({
                        photos: {
                            "title": "放大商品图",
                            "start": 0,
                            "data": [
                                {
                                    "alt": e[0].title,
                                    "pid": 1,
                                    "src": e[0].src,
                                }
                            ]
                        }
                    })
                }
            })
            carousel.render({
                elem: '#ID-carousel-demo-1',
                width: 'auto',
                height: '60px',
                autoplay: false,
                indicator: 'none',
                arrow: 'always'
            });


            // // 请求数据 
            axios({
                url: '/api/CloudShop/select/CloudShop_Goods_Query/',
                params: {
                    "goods_id": goods_id,
                    "type": 2,
                    "axios_type": '1'
                }
            }).then(res => {
                $('.sku-name').html(res.data.data.name);
                $('.Price').html(res.data.data.price);
                $('.main-img').html(`<img lay-on="ShowMinImg" title="${res.data.data.name}" class="Yy-h-100 Yy-w-100 Yy-cursor-pointer Yy-img-hover1 max_img" src="${res.data.data.goods_main_img}" alt="${res.data.data.name}">`)
                // 添加封面小图
                for (let index = 0; index < 1; index++) {
                    if (index == 0) {
                        $('.max_img_len').append(`<img class="Yy-cursor-pointer Yy-img-hover1 Yy-this"
                                src="${res.data.data.goods_main_img}"
                                alt="${res.data.data.name}"
                                style="width: 50px;height: 50px;"
                                >`);
                    } else {
                        $('.max_img_len').append(`<img class="Yy-cursor-pointer Yy-img-hover1"
                                src="${res.data.data.goods_main_img}"
                                alt="${res.data.data.name}"
                                style="width: 50px;height: 50px;"
                                >`);
                    }

                }

                // 渲染商家名称
                $('.ShopName').html(res.data.data.user.user_name);

            }).catch(err => {
                setTimeout(() => {
                    YyBack();
                }, 1200);
            });
        });
    }

</script>

{% endblock %}